<template>
  <div class="course-list">
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in tableData" :key="item.id">
          <div class="course-item" @click="handleClick(item)">
            <div class="img-box img-hover">
              <img :src="coverImg(item)" />
            </div>
            <div class="txt-box">
              <h2 class="sheng">{{ item.title }}</h2>
              <p>{{ item.team }}</p>
              <span>{{ item.createTime }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <Pagination
        v-show="parseInt(pageObj.count) > 0"
        :total="parseInt(pageObj.count)"
        @change="getList"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
      />
    </el-card>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 12,
        courseType: 1,
        // status: 1,
      },
      tableData: [],
      pageObj: {},
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch(
        'queryOpenApiSysCourse',
        this.listQuery,
      )
      this.tableData = res.data
      this.pageObj = res
    },
    handleClick(row) {
      this.$router.push({ name: 'course-home-detail', query: { id: row.id } })
    },
  },
}
</script>
<style scoped lang="scss">
.course-list {
  margin-top: 20px;
  .course-item {
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    .img-box {
      width: 100%;
      height: 200px;
      border-bottom: 1px solid #f5f5f5;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .txt-box {
      padding: 10px;
      h2 {
        font-size: 16px;
        color: #333;
        line-height: 2;
      }
      p,
      span {
        color: #666;
        line-height: 1.5;
      }
    }
  }
}
</style>